import React, { Component } from 'react';

localStorage.setItem('userName', '吴大勋')

// class Footer extends Component {
//   render () {
//     return (
//       <footer>
//         Copyright 2011-2022 北京千锋互联科技有限公司 京ICP备12003911号-3 
//       </footer>
//     )
//   }
// }

// 1.高阶组件：就是一个纯函数，将一个组件作为参数，并且返回另一个新的组件
// 2.高阶组件内部可以实现 可以复用的业务逻辑
// 3.高阶组件内可以通过 类似于 父子组件关系 传递数据
// 4.<></>表示react的空标签，同理 react常用的另一个空标签 React.Fragment
const withFooter = (OldCom) => {
  return class extends Component {
    state = { userName: ''}
    componentDidMount () {
      console.log(localStorage.getItem('userName'))
      this.setState({
        userName: localStorage.getItem('userName')
      })
    }
    render () {
      return (
        <React.Fragment>
          <OldCom userName = { this.state.userName }/>
          <footer>
            Copyright 2011-2022 北京千锋互联科技有限公司 京ICP备12003911号-3 
          </footer>
        </React.Fragment>
      )
    }
  }
}

class Child1 extends Component {
  render () {
    return (
      <div>
        <h1>child1-{ this.props.userName }</h1>
      </div>
    )
  }
}
Child1 = withFooter(Child1)
class Child2 extends Component {
  render () {
    return (
      <div>
        <h1>child2-{ this.props.userName }</h1>
      </div>
    )
  }
}
Child2 = withFooter(Child2)
class App extends Component {
  render() {
    return (
      <div>
        <Child1 />
        <hr />
        <Child2 />
      </div>
    );
  }
}

export default App;